<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="任务名称" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span class="cup" @click="handleEdit(row)">{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="cron" label="cron" width="140">
        <template slot-scope="{ row }">
          <span>{{ isHaveCron(row) ? row.cron : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="enabled" label="采集状态" width="100">
        <template slot-scope="{ row }">
          <el-tooltip
            class="item"
            effect="light"
            content="请配置采集计划"
            placement="top"
            :disabled="isHaveCron(row)"
          >
            <el-switch
              v-model="row.enabled"
              active-value="1"
              inactive-value="0"
              :disabled="!isHaveCron(row)"
              @change="handleChange(row)"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="executeCount" label="执行次数" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.executeCount ? row.executeCount : '--' }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="nextExecuteTime" label="下次执行时间" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.nextExecuteTime ? row.nextExecuteTime : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lastExecuteTime" label="最后执行时间" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.lastExecuteTime ? row.lastExecuteTime : '--' }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(row)"
            style="margin-right: 0px"
            >编辑</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="handleExecute(row)"
            style="margin-right: 10px"
            >执行</el-button
          >
          <el-dropdown>
            <el-button size="mini" type="primary">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item @click.native="handleExecute(row)"
                >执行</el-dropdown-item
              > -->

              <el-dropdown-item @click.native="handleCron(row)"
                >设置计划</el-dropdown-item
              >
              <el-dropdown-item @click.native="handleExecuteLog(row)"
                >采集记录</el-dropdown-item
              >
              <el-dropdown-item @click.native="handleDelete(row)"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button-group>
            <el-button type="primary" size="mini" @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="handleDelete(row)"
              >删除</el-button
            >
            <el-button type="success" size="mini" @click="handleExecute(row)"
              >执行</el-button
            >
            <el-button type="success" size="mini" @click="handleExecuteLog(row)"
              >采集记录</el-button
            >
            <el-button type="success" size="mini" @click="handleCron(row)"
              >设置计划</el-button
            >
          </el-button-group> -->
        </template>
      </el-table-column>
      <div slot="empty" class="emptyBg">
        <el-empty :image-size="200"></el-empty>
      </div>
    </el-table>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
    <Cron />
  </div>
</template>
<script>
import { openApiSpiderTaskExecute } from '@/api/openApi'
export default {
  components: {
    Cron: () => import('./Cron.vue'),
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
      },
      tableData: [],
      pageObj: {},
    }
  },
  computed: {
    isHaveCron() {
      return (row) => {
        return row.hasOwnProperty('cron') && row.cron != ''
      }
    },
  },
  mounted() {
    this.getList()
    this.$store.commit('CLEAR_TASKROW')
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('queryTestPaper', this.listQuery)
      this.tableData = res.data
      this.pageObj = res
    },
    handleEdit(row) {
      this.$store.commit('SET_ACTIVEROW', row)
      this.$store.commit('SET_ACTIVENAME', 'create')
    },
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    async delete(row) {
      await this.$store.dispatch('deleteTestPaper', row)
      this.getList()
    },
    async handleExecute(row) {
      await this.$store.dispatch('runTestPaper', row)
      this.successMsg('采集完成')
      // openApiSpiderTaskExecute({ id: row.id }).then((res) => {
      //   // console.log(res)
      // })
    },
    handleExecuteLog(row) {
      this.$bus.$emit('showTaskLog', row.id)
    },
    handleCron(row) {
      this.$bus.$emit('setCollectCron', row)
    },
    async handleChange(row) {
      if (row.enabled == 1) {
        await this.$store.dispatch('startTestPaper', row)
      } else {
        await this.$store.dispatch('stopTestPaper', row)
      }
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
</style>